<template>
	<view class="flex justify-center align-center" style="width: 100%;">
		<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show" style="width: 100%;">
			<view class="flex justify-center align-center" style="width: 100%;">
				<view class="round bg-white shadow flex justify-center align-center" style="width: 70%;">
					<view class="flex justify-around align-center" style="width: 100%;">
						<view @tap="leftClick" class="flex justify-end align-center" style="width: 40%;">
							<button v-if="leftTitle&&leftTitle.length>0&&showLeftIcon" :class="'cu-btn bg-white lg cuIcon-'+leftIcon"><text class="padding-left-xs">{{leftTitle}}</text></button>
							<button v-else class="cu-btn bg-white lg">{{leftTitle}}</button>
						</view>
						<view class="padding-top-xs padding-bottom-xs">
							<button @tap="middleClick" class="cu-btn cuIcon bg-gradual-blue lg">
								<text class="cuIcon-add text-white"></text>
							</button>
						</view>
						<view class="flex justify-start align-center" style="width: 40%;">
							<button open-type="share" class="cu-btn cuIcon-share bg-white lg"><text class="padding-left-xs">分享</text></button>
						</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'
	export default {
		name:"FloatTabbar",
		components: {
			uniTransition
		},
		data() {
			return {
				themeColor:this.ThemeColor,
				show: true,
				modeClass: 'fade',
			};
		},
		props: {
			needAction: {
				type: Boolean,
				default: true
			},
			leftTitle:{
				type:String,
				default:'关注'
			},
			leftIcon: {
				type:String,
				default:'add'
			},
			showLeftIcon:{
				type: Boolean,
				default: true
			}
		},
		methods: {
			leftClick() {
				this.$emit('leftClick')
			},
			middleClick() 
			{
				this.$emit('middleClick')
			},
			showTabbar() {
				if(!this.needAction) {
					return
				}
				if(this.show) {
					return
				}
				this.show = true
				this.modeClass = ['fade', 'slide-top']
			},
			hiddenTabbar() 
			{
				if(!this.needAction) {
					return
				}
				if(!this.show) {
					return
				}
				this.show = false
				this.modeClass = ['fade', 'slide-bottom']
			}
		},
	}
</script>

<style lang="scss">

</style>
